<template>
	<view :style="{ paddingTop: iStatusBarHeight + 'px'}">
		<scroll-view
			:style="`height: ${visibleHeight}px;`" 
			:scroll-top="scrollTop" 
			:scroll-x="false" 
			:scroll-y="false"
			:scroll-with-animation="true" 
			:enable-passive="true" 
			:enhanced="true" 
			:show-scrollbar="false">
			<slot></slot>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name: "status-bar",
		props: {
			scrollTop: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				visibleHeight: 0,
				iStatusBarHeight: 0
			};
		},
		async created() {
			// this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight; // 往下推8个像素
			this.iStatusBarHeight = uni.getMenuButtonBoundingClientRect().top;
			const { windowHeight } = await uni.getSystemInfo();
			this.visibleHeight = windowHeight - this.iStatusBarHeight
			this.$emit('updateVisibleHeight', this.visibleHeight )
		},
		methods: {
 
		}
	}
</script>

<style>

</style>